<template>
  <form-view class="smart-plan-view" :fields="fields" :value="formValue">
    <!-- start 状态 -->
    <template slot="planStatus" slot-scope="{field, value}">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          <div class="plan-status" :class="[statusClassMap[value]]">{{ getStatusName(value) }}</div>
        </div>
      </div>
    </template>
    <!-- end 状态 -->
    <!-- start 任务类型 -->
    <template slot="planType" slot-scope="{field, value}">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          {{ getModuleTypeName(value, true) }}
        </div>
      </div>
    </template>
    <!-- end 任务类型 -->
    <!-- start 创建维度 -->
    <template slot="createDimension" slot-scope="{field, value}">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          {{ value == 1 ? $t('smartPlan.createByCustomerDimension') : $t('smartPlan.createByProductDimension') }}
        </div>
      </div>
    </template>
    <!-- end 创建维度 -->
    <!-- start 计划范围 -->
    <template slot="planRange" slot-scope="{field, value}">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          <div class="condition-list">
            <div v-for="(item, index) in value" :key="index">
              <div class="condition-item">
                <div class="title-name">
                  <span>{{ $t('zhongqi.setting.conditionGroup') }}{{ index + 1 }}</span>
                </div>
                <div class="criteria-item-detail" v-for="(ele, ind) in item" :key="ind">
                  {{ind > 0 ? $t('common.connector.text.and') : $t('zhongqi.setting.when')}}<span>{{ moduleStr(ele.module) }}</span>
                  <span v-if="ele.conditionItem.field && ele.conditionItem.field.displayName">{{ ele.conditionItem.field.displayName }}</span>
                  <span>{{ operatorStr(ele.conditionItem.operator, ele.conditionItem.field) }}： </span>
                  <span>{{ valueStr(ele.conditionItem) }}</span>
                </div>
              </div>
              <div class="mar-b-12" v-if="index < value.length - 1">{{ $t('zhongqi.setting.orText') }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- end 计划范围 -->
    <!-- start 派单设置 -->
    <template slot="allotSetting" slot-scope="{field, value}">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          {{ getAllotLabel(value) }}
        </div>
      </div>
    </template>
    <!-- end 派单设置 -->
    <!-- start 开始时间设置 -->
    <template slot="startSetting" slot-scope="{field, value}">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          {{ getStartAndEndTimeLabel(value, 'start') }}
        </div>
      </div>
    </template>
    <!-- end 开始时间设置 -->
    <!-- start 结束时间设置 -->
    <template slot="endSetting" slot-scope="{field, value}">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          {{ getStartAndEndTimeLabel(value, 'end') }}
        </div>
      </div>
    </template>
    <!-- end 结束时间设置 -->
    <!-- start 重复周期设置 -->
    <template slot="periodSetting" slot-scope="{field, value}">
      <div class="form-view-row">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          {{ getPeriodLabel(value) }}
        </div>
      </div>
    </template>
    <!-- end 重复周期设置 -->
  </form-view>
</template>

<script>
import SmartPlanMixin from '@src/modules/smartPlan/mixin/index.js'
import { t } from '@src/locales'
import { formatDate, formatAddress } from 'pub-bbx-utils';
import _ from 'lodash'

export default {
  // 基本信息
  name: 'smart-plan-view',
  mixins: [SmartPlanMixin],
  props: {
    formValue: {
      type: Object,
      default: () => ({})
    },
    fields: {
      type: Array,
      default: () => ([])
    },
  },
  data() {
    return {

    }
  },
  methods: {
    moduleStr(val) {
      let obj = {
        'customer': t('common.base.customer'),
        'product': t('common.base.product'),
        'contract': t('contract.contract'),
      }
      return obj[val[0]]
    },
    operatorStr(val, field) {
      const formType = field?.formType
      // 日期处理
      if (['date', 'datetime'].includes(formType) && ['gt', 'lt', 'le', 'ge'].includes(val)) {
        val = `${val}_date`
      }
      let operatorObj = {
        like: t('component.advancedSearch.conditionMap.like'),
        in: t('component.advancedSearch.conditionMap.in'),
        cascader: t('component.advancedSearch.conditionMap.cascader'),
        user: t('component.advancedSearch.conditionMap.user'),
        ex: t('component.advancedSearch.conditionMap.not_in'),
        not_in: t('component.advancedSearch.conditionMap.not_in'),
        eq: t('component.advancedSearch.conditionMap.eq'),
        notEq: t('component.advancedSearch.conditionMap.uneq'),
        uneq: t('component.advancedSearch.conditionMap.uneq'),
        gt: t('component.advancedSearch.conditionMap.gt'),
        ge: t('component.advancedSearch.conditionMap.ge'),
        lt: t('component.advancedSearch.conditionMap.lt'),
        le: t('component.advancedSearch.conditionMap.le'),
        between: t('component.advancedSearch.conditionMap.between'),
        address: t('component.advancedSearch.conditionMap.like'),
        gt_date: t('component.advancedSearch.conditionMap.gt_date'),
        lt_date: t('component.advancedSearch.conditionMap.lt_date'),
        le_date: t('component.advancedSearch.conditionMap.le_date'),
        ge_date: t('component.advancedSearch.conditionMap.ge_date'),
      }
      return operatorObj[val]
    },
    valueStr(conditionItem) {
      // 人员、产品、客户、联系人
      if (['user', 'product', 'customer', 'linkman'].includes(conditionItem.formType)) {
        let arr = _.cloneDeep(conditionItem.value)
        if (Array.isArray(arr)) {
          return arr.map(item => item.name).join(',')
        }
        return arr.name
      } else if (conditionItem.formType === 'tags') {
        // 服务部门
        let arr = _.cloneDeep(conditionItem.value)
        if (Array.isArray(arr)) {
          return arr.map(item => item.tagName).join(',')
        }
        return arr.tagName
      } else if (['date', 'datetime', 'createTime'].includes(conditionItem.formType)) {
        if (conditionItem.value && conditionItem.value.length > 0) {
          return `${formatDate(conditionItem.value[0], 'yyyy-MM-dd')} - ${formatDate(conditionItem.value[1], 'yyyy-MM-dd')}`;
        }
        return formatDate(conditionItem.value, 'yyyy-MM-dd')
      } else if (conditionItem.formType === 'select') {
        let arr = _.cloneDeep(conditionItem.value)
        if (Array.isArray(arr)) {
          return arr.join(',')
        } 
      } else if (conditionItem.formType === 'cascader') {
        return conditionItem.valueList.join(',')
      } else if (conditionItem.formType === 'address') {
        return formatAddress(conditionItem.value)
      } else {
        if (conditionItem.value && Array.isArray(conditionItem.value)) {
          return conditionItem.value.join(',')
        }
        return conditionItem.value
      }
    },
    // 获取派单设置显示label
    getAllotLabel(setting) {
      if (this.formValue.planType == 'TASK') {
        const allotTypeMap = {
          pool: t('task.edit.allotToPool'),
          normal: t('task.edit.allotToManager'),
          auto: t('task.detail.components.autoAllot'),
          waitDistribution: t('task.edit.saveToAllotList'),
        }
        return allotTypeMap[setting.allotType]
      }
      if (this.formValue.planType == 'EVENT') {
        if (setting.eventAssignIsAuto) return t('common.event.actionStatus.autoDispatch')
        return t('event.edit.text2')
      }
      return ''
    },
  },
}
</script>

<style lang="scss">
.smart-plan-view {
  .plan-status {
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 2px;
    border: 1px solid #8C8C8C;
    &.processing {
      color: #1989FA;
      border-color: #1989FA;
    }
    &.finished {
      color: #8C8C8C;
      border-color: #8C8C8C;
    }
    &.canceled {
      color: #F56C6C;
      border-color: #F56C6C;
    }
  }
  .condition-list {
    margin-top: 10px;
    .condition-item {
      margin-bottom: 12px;
      border: 1px solid #E8E8E8;
      background: #fff;
    }
    .title-name {
      padding: 0 8px;
      height: 32px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #262626;
      line-height: 28px;
      background: #FAFAFA;
    }

    .criteria-item-detail {
      padding: 0 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #595959;
      line-height: 30px;
      background: #fff;
    }
  }
}
</style>